<!DOCTYPE>
<html>
<head>
  <title>Q.slider | Q.js </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!-- 使用QLib控件是必须包含样式表 -->
  <link type="text/css" rel="stylesheet" href="../ui.css" />
  <!--  
  提示：src="{QLib目录}/Q.js" 
  根据实际存放路径， 测试代码都是在QLib目录的samples文件夹下，所以这里用的是"../Q.js" 
  -->
  <script type="text/javascript" src="../Q.js">
  <!--
  // 需要加载额外库时
  import utils.stl;
  import ui.slider;
  import ui.drag;
  -->
  </script>

  <script>
  <!--
  Q.Ready(function() {
    // 提示对话框
    var e = new Q.slider({
      id: 'x-ctrl',
      min: 0,
      max: 1000, 
      on_xscroll: function(v) { 
        Q.$('x-ctrl-value').innerText="当前值: " + v;
      }
    });
    e.set_value(300);
    /*
    Q.$('x-ctrl-range').innerText = "最小值-最大值: " + e.min + "-" + e.max;
    Q.$('x-ctrl-value').innerText="当前值: " + e.value;
    var e2= new Q.slider({id: 'y-ctrl', type: 'vt', min: 0, max: 1000});
    e2.set_value(600);
    */
  });
  //-->
  </script>
</head>
<body onselectstart="return false;" style="height: 100%;overflow:hidden;-moz-user-select:none;-webkit-user-select: none;">

<hr>
<p>滑块控件 - Q.slider</p>
<hr>
<br>
<p> 水平 </p>
<br>
<p id='x-ctrl-range'> 最小值-最大值: </p> 
<p id='x-ctrl-value'> 当前值: </p> 
<div id="x-ctrl" class="q-slider x" style="width: 200px; ">
  <div class="q-thumb" style="height:16px; width: 16px;margin:7px 0;"></div>
</div>


<br>
<br>

<p> 垂直 </p>
<br>
<div id="y-ctrl" class="q-slider y" style="height: 200px;">
  <div class="q-thumb" style="height:16px; width: 16px;margin:0 7px;"></div>
</div>

</body>
</html>
